<template>
    <div>
        <div class="table-search">
            <el-input v-model="searchName" type="text" size="small" placeholder="请输入查询条件" suffix-icon="el-icon-search" style="width: 300px;" @keyup.enter.native="handleChangeSearch" @input="handleChangeSearch" clearable></el-input>
            <el-button size="small" type="primary"  @click="addColorBtn" icon="el-icon-plus">添加颜色</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 100%" max-height="400">
            <el-table-column
            type="index"
            >
            </el-table-column>
            <el-table-column
            prop="propertyValueId"
            label="ID"
            >
            </el-table-column>
            <el-table-column prop="valueCode" label="编码"></el-table-column>
            <el-table-column
            prop="propertyValue"
            label="颜色">
            </el-table-column>
            <el-table-column
            prop="gmtCreate"
            label="创建时间">
            </el-table-column>
             <el-table-column
            prop="gmtModified"
            label="修改时间">
                <template slot-scope="scope">
                    {{ scope.row.gmtModified ? scope.row.gmtModified : '----'}}
                </template>
            </el-table-column>
            <el-table-column
            label="操作" width="80">
                <template slot-scope="scope">
                    <span @click="handleEditColorVal(scope.row)">
                        <el-icon class="el-icon-edit" ></el-icon>
                    </span>
                    <span @click="handleDelColorVal(scope.row)">
                        <el-icon class="el-icon-delete"></el-icon>
                    </span>
                </template>
            </el-table-column>
        </el-table>
 
        <!-- 添加颜色属性 -->
        <el-dialog
        title="颜色编辑"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="40%"
        :before-close="handleClose">
            <el-form label-width="100px">
                <el-form-item label='颜色名称:'>
                    <el-input size="small" type='text' v-model="form.propertyValue" placeholder="请输入颜色名称"></el-input>
                    <small>创建多个颜色，请用逗号分隔不同颜色</small>
                </el-form-item>
                <el-form-item label="选择类别:" v-if="type == 'add'">
                    <el-select size="small" v-model="form.propertyGroupId" filterable placeholder="请选择类别" style="width: 100%">
                        <el-option
                        v-for="item in category1List"
                        :key="item.categoryId"
                        :label="item.categoryName"
                        :value="item.categoryId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="handleColorValSubmit">提交保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: ['propertyId'],
        data() {
            return {
                searchName: '',
                tableData: [],
                dialogVisible: false,
                form: {
                    propertyValue: '',
                    propertyGroupId: ''
                },
                type: '',
                category1List: []
            }
        },
        mounted() {
            this.getGroupListByPropertyId()
            this.getTopCategoryList()
        },
        methods: {
            handleChangeSearch() {
                this.getGroupListByPropertyId()
            },
            /**获取类目第一级 */
            getTopCategoryList() {
                this.$server.goodsControlApi.getTopCategoryList().then(res => {
                    this.category1List= res.data
                })
            },
            getGroupListByPropertyId() {
                try{
                    let query= {
                        content: this.searchName
                    }
                    this.$server.goodsControlApi.getAttributeVal(this.propertyId, query).then(res => {
                        this.tableData= res.data
                    })
                }catch(error){this.$paramsError(error)}
            },
            addColorBtn() {
                this.form= {}
                this.dialogVisible= true
                this.type="add"
            },
            handleColorValSubmit() {
                try{
                    if(this.type == 'add') {
                        let params={
                            propertyId: this.propertyId,
                            propertyValue: this.form.propertyValue,
                            propertyGroupId: this.form.propertyGroupId
                        }
                        this.$server.goodsControlApi.addAttributeVal(params).then(res => {
                            this.dialogVisible= false
                            this.getGroupListByPropertyId(this.propertyId)
                            this.form= {}
                        }).catch()
                    }else if(this.type == 'edit') {
                        let params={
                            propertyValueId: this.form.propertyValueId,
                            propertyValue: this.form.propertyValue
                        }
                        this.$server.goodsControlApi.editAttributeVal(params).then(res => {
                            this.dialogVisible= false
                            this.getGroupListByPropertyId(this.propertyId)
                        }).catch()
                    }
                }catch(error) {this.$paramsError(error)}
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.dialogVisible= false
                }).catch(_ => {});
            },
      
            handleEditColorVal(scope) {
                this.type= 'edit'
                this.form= {}
                this.dialogVisible= true
                this.form= scope
            },
            handleDelColorVal(scope) { 
                try{
                    this.$confirm('确定删除该颜色？').then(_ => {
                        this.$server.goodsControlApi.delAttributeVal(scope.propertyValueId).then(res => {
                            this.getGroupListByPropertyId()
                        }).catch()
                    }).catch()
                }catch(error){this.$paramsError(error)}
            }
        }
    }
</script>

